<template>
	<top_bg class="top">
		<template v-slot:title>
			<p>Add new address</p>
		</template>
	</top_bg>
	<img src="../../assets/goods_left.png" class="left_btn" @click="goPrePage">

	<div class="myForm" name="submit">
		<p class="desc">*FullName</p>
		<input class="input1" v-model="fullName" placeholder="fullName" />

		<p class="desc">*Address</p>
		<input class="input1" v-model="address" placeholder="address" />

		<p class="desc">*City</p>
		<input class="input1" v-model="city" placeholder="city" />

		<p class="desc">State/Province/Region</p>
		<input class="input1" v-model="state" placeholder="stateProvinceRegion" />

		<p class="desc">*Country</p>
		<input class="input1" v-model="country" placeholder="country" />

		<p class="desc">*PhoneNumber</p>
		<input class="input1" v-model="phoneNumber" placeholder="phoneNumber" />

		<p class="desc">Email</p>
		<input class="input1" v-model="emsCode" placeholder="Email" />

		<van-button class="saveBtn" round block type="primary" native-type="submit" @click="save">
			Save
		</van-button>
	</div>

</template>

<script>
	// import { Form, Field, CellGroup } from 'vant';
	import {
		ref
	} from 'vue';
	import globalData from '@/main.js';
	import {
		showToast
	} from 'vant';

	export default {
		setup() {
			const username = ref('');
			const password = ref('');
			const onSubmit = (values) => {
				console.log('submit', values);
			};

			return {
				username,
				password,
				onSubmit,
			};
		},
		mounted() {
			console.log("===mounted===")
			var info = this.$route.params.context
			console.log("===mounted===info:", info)
			console.log("===mounted===info:", typeof info)
			if (info == null || info == " ") {
				return;
			}
			var objValue = JSON.parse(info)
			var that = this
			that.addressInfo = objValue
			console.log("===that.addressInfo ===", that.addressInfo)

			that.fullName = that.addressInfo.shouhuoren
			that.country = that.addressInfo.country
			that.state = that.addressInfo.sheng
			that.city = that.addressInfo.shi
			that.address = that.addressInfo.jiedao
			that.phoneNumber = that.addressInfo.mobile
			that.emsCode = that.addressInfo.emsCode
			console.log("===that.fullName===", that.fullName)
		},
		data() {
			return {
				fullName: '',
				address: '',
				city: '',
				state: '',
				country: '',
				phoneNumber: '',
				addressInfo: '',
				emsCode: '',
			}
		},
		methods: {
			save: function() {
				console.log("===save===")
				var uid = this.$cookies.get('uid')

				const formData = new FormData()
				formData.append('uid', uid)
				formData.append("fullName", this.fullName)
				formData.append("address", this.address)
				formData.append("city", this.city)
				formData.append("state", this.state)
				formData.append("country", this.country)
				formData.append("phoneNumber", this.phoneNumber)
				formData.append("emsCode", this.emsCode)
				var that = this
				this.axios({
					method: "POST",
					url: globalData['member_url'] + 'home/useraddress/',
					data: formData,
				}).then(function(response) {
					console.log(" Save address response:", response)
					that.$router.back();
					showToast("Save OK")
				}).catch(function(error) { // 请求失败处理
					console.log(error);
				});
			},
			goPrePage: function() {
				console.log('返回~');
				//this.$router.go(-1);
				this.$router.back();
			},
		}
	};
</script>

<style>
	.left_btn {
		position: absolute;
		top: 2.5rem;
		left: 1rem;
		width: 2rem;
		height: 2rem;
		z-index: 1;
		/* background-color: blueviolet; */
	}

	.desc {
		margin-left: 1rem;
		/* font-family: 'PingFang SC'; */
		font-size: 1rem;
		font-family: 'PingFang SC';
	}

	.input1 {
		width: 90vw;
		margin-left: 1rem;
		margin-right: 1rem;
		height: 3.5vh;
		font-size: 1rem;
	}

	.saveBtn {
		position: fixed;
		width: 90vw;
		margin-left: 1rem;
		margin-right: 1rem;
		/* margin-top: 5rem; */
		bottom: 2rem;
		height: 3rem;
		font-size: 1rem;
		font-family: 'PingFang SC';
	}

	.myForm {
		/* width: 80vw;
		margin-left: 1rem;
		margin-right: 1rem; */
	}

	.van-toast__text {
		font-size: 1.5rem;
	}

	.van-toast {
		width: 80vw;
		/* 自定义宽度 */
		height: 10vh;
	}
</style>